/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/**
 * 驳回原因
 */
import React, { useState } from 'react';
import { Modal, Form, Row, Col, Radio, Input, message, Button } from 'antd';

const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
  },
  wrapperCol: {
    xs: { span: 24 },
  },
  colon: false,
};

const checkDatas = ['未实名认证', '经营信息不全', '驿站名称不规范', '驿站地址不规范'];
const RefuseForm = ({ onCancel, visible, onOk }: any) => {
  const [form] = Form.useForm();
  const [disabled, setDisabled] = useState(false);
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = async () => {
    const { checkData } = await form.validateFields();
    const isReason = checkData === '其他';
    if (isReason && !inputValue) {
      message.error('请填写自定义内容');
      return;
    }
    let data: any = {
      reject_reason_type: checkData,
      is_approved: 0,
    };
    if (isReason) {
      data = {
        ...data,
        reject_reason_type: '-1',
        reject_reason_desc: inputValue,
      };
    }
    onOk(data);
    setInputValue('');
  };

  const onRadioChange = async (values: any) => {
    const radioStatus = values.target.value !== '其他';
    setDisabled(radioStatus);
    if (!radioStatus) return;
    setInputValue('');
  };

  return (
    <Modal
      title='驳回原因'
      destroyOnClose={true}
      visible={visible}
      footer={null}
      width={'720px'}
      maskClosable={true}
      centered={true}
      onCancel={onCancel}
    >
      <Form
        preserve={false}
        form={form}
        initialValues={{
          checkData: '其他',
        }}
      >
        <FormItem {...formItemLayout} name='checkData'>
          <Radio.Group onChange={onRadioChange}>
            <Row>
              {checkDatas.map((item, index) => {
                return (
                  <Col span={24} key={`${item}+1`}>
                    <Radio value={index + 1} style={{ lineHeight: '32px' }}>
                      {item}
                    </Radio>
                  </Col>
                );
              })}
            </Row>
            <Row>
              <Col sm={5} xs={24}>
                <Radio value={'其他'} style={{ lineHeight: '32px' }}>
                  其他
                </Radio>
              </Col>
              <Col sm={19} xs={24}>
                <Input
                  disabled={disabled}
                  onChange={(e) => setInputValue(e.target.value)}
                  value={inputValue}
                  placeholder='该内容会展示给客户，请谨慎填写'
                  maxLength={20}
                ></Input>
              </Col>
            </Row>
          </Radio.Group>
        </FormItem>
        <FormItem>
          <Button type='primary' size='large' onClick={handleSubmit} htmlType='submit'>
            确定
          </Button>
        </FormItem>
      </Form>
    </Modal>
  );
};

export default RefuseForm;
